<template>
    <div>
        <el-card class="body">
            <!-- 顶部的面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i>四叶草医生</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/order/doc/medicine' }">患者管理</el-breadcrumb-item>
                <el-breadcrumb-item>开处方</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider content-position="left"></el-divider>

            <!-- 表单 -->
            <div class="rule-form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="医生姓名" prop="doctor">
                        <el-input v-model="loginInfo.name" disabled :value="loginInfo.id"></el-input>
                    </el-form-item>
                    <el-form-item label="患者姓名" prop="patient">
                        <el-select v-model="ruleForm.patient" style="width: 100%" placeholder="请选择患者姓名">
                            <el-option v-for="item in patientName" :label="item.nickName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="患者病症" prop="description">
                        <el-input v-model="ruleForm.description" placeholder="请输入患者病症"></el-input>
                    </el-form-item>
                    <el-form-item label="药品名称" prop="medicine">
                        <el-input v-model="ruleForm.medicine" placeholder="请输入药品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="药品价格" prop="price">
                        <el-input v-model="ruleForm.price" placeholder="请输入药品价格"></el-input>
                    </el-form-item>
                    <el-form-item label="注意事项" prop="attention">
                        <el-input v-model="ruleForm.attention" placeholder="请输入患者病症"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button type="warning" @click="goBack()">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>
    </div>
</template>

<script>
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";
import TokenAxios from "@/http/TokenAxios";
import qs from "qs";
export default {
    data(){
        return{
            loginInfo: {
                username: '',
                avatar: '',
                role:'',
                name:''
            },
            ruleForm: {
                name: '',
                description: '',
                medicine: '',
                price: '',
                patient:'',
                attention:''
            },
            patientName:[],
            rules: {
                patient: [
                    {required: true, message: '请选择患者姓名', trigger: 'change'}
                ],
                description: [
                    {required: true, message: '请输入病症描述', trigger: 'blur'}
                ],
                medicine: [
                    {required: true, message: '请输入药品名称', trigger: 'blur'}
                ],
                price: [
                    {required: true, message: '请输入价格', trigger: 'blur'}
                ],
                attention: [
                    {required: true, message: '请输入注意事项', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let url=BaseUrl.PRESCRIPTION_DOCTOR+'/doc/prescription/addNew';
                    console.log(url);

                    const requestData={
                        userId: this.ruleForm.patient,
                        description: this.ruleForm.description,
                        medicine: this.ruleForm.medicine,
                        price:this.ruleForm.price,
                        attention: this.ruleForm.attention
                    }

                    // const formData=qs.stringify(requestData);

                    TokenAxios.post(url,requestData).then((response)=>{
                        if (response.data.state ===20000){
                            this.$message({
                                message:'开处方成功',
                                type:'success'
                            })
                            this.$router.push('/order/doc/medicine')
                        }else{
                            this.$alert(response.data.message,'错误',{
                                confirmButtonText:'确定',
                                callback: action =>{

                            }
                            });
                        }
                    })
                }else {
                    return false;
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        goBack() {
            this.$router.push('/order/doc/medicine');
        },
        loadCurrentLoginInfo(){
            this.loginInfo=JSON.parse(localStorage.getItem('loginInfo'));
        },
    },
    created() {
        let patientUrl=BaseUrl.PRESCRIPTION_DOCTOR+'/doc/prescription/getAll';
        console.log(patientUrl);

        TokenAxios.get(patientUrl).then((response)=>{
            if (response.data.state===20000){
                this.patientName=response.data.data;
            }
        })
    },
    mounted() {
        this.loadCurrentLoginInfo()
    }
}
</script>